import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class StoreSettingClass extends Vue {
  storeName= ''
  isShowHome = true
  isShowCategory = true
  isShowFound = true
  isShowBrand = true
  isShowMine = true

  render () {
    return (
      <div class='content'>
      <mt-header class='header' fixed title="店铺设置">
        <mt-button onClick={() => { this.$router.go(-1) }} icon="" slot="left"><icon name = 'backIcon' scale='2'/></mt-button>
      </mt-header>

      <div style='margin-top:76px'>
      <mt-field style='margin-top:56px;background-image: linear-gradient(0deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
              background-size: 100% 1px;
              background-repeat: no-repeat;
              background-position: bottom;'
               label="店铺名"
               placeholder="请输入"
               v-model={this.storeName}>
      </mt-field>
      <dl>
        <dd style='height:40px;line-height:40px;padding-left:10px'>店铺模板</dd>
        <dt>
        <mt-cell title="首页">
          <mt-switch v-model={this.isShowHome} onChange={() => { this.isShowHome = !this.isShowHome }}></mt-switch>
        </mt-cell>
        <mt-cell title="分类">
          <mt-switch v-model={this.isShowCategory} onChange={() => { this.isShowCategory = !this.isShowCategory }}></mt-switch>
        </mt-cell>
        <mt-cell title="发现">
          <mt-switch v-model={this.isShowFound} onChange={() => { this.isShowFound = !this.isShowFound }}></mt-switch>
        </mt-cell>
        <mt-cell title="品牌">
          <mt-switch v-model={this.isShowBrand} onChange={() => { this.isShowBrand = !this.isShowBrand }}></mt-switch>
        </mt-cell>
        <mt-cell title="我的">
          <mt-switch v-model={this.isShowMine} onChange={() => { this.isShowMine = !this.isShowMine }}></mt-switch>
        </mt-cell>
        </dt>
      </dl>
      </div>

      </div>
    )
  }
}
